<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{"APP_ADD_STORAGE_PROVISIONER" |translate}}</h3>
    <div class="modal-body">
        <form clrForm #nfsForm='ngForm'>
            <clr-input-container>
                <label>{{"APP_NAME"|translate}}</label>
                <input clrInput [(ngModel)]="item.name" name="name"
                       pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*" size="34" disabled
                       required>
                <clr-control-helper>{{'APP_STORAGE_NAME_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>

            <clr-input-container>
                <label>vCenter {{"APP_USERNAME"|translate}}</label>
                <input clrInput [(ngModel)]="item.vars['vc_username']" name="vc_username" size="34" required>
            </clr-input-container>

            <clr-password-container>
                <label>vCenter {{"APP_PASSWORD"|translate}}</label>
                <input clrPassword [(ngModel)]="item.vars['vc_password']" name="vc_password" size="34" required>
            </clr-password-container>

            <clr-input-container>
                <label>vCenter {{"APP_HOST"|translate}}</label>
                <input clrInput [(ngModel)]="item.vars['vc_host']" name="vc_host" size="34" required>
            </clr-input-container>

            <clr-input-container>
                <label>vCenter {{"APP_PORT"|translate}}</label>
                <input clrInput type="number" [(ngModel)]="item.vars['vc_port']" name="vc_port" min="80" max="65535"
                       size="34" required>
            </clr-input-container>

            <clr-input-container>
                <label>Datacenter</label>
                <input clrInput [(ngModel)]="item.vars['datacenter']" name="datacenter" size="34" required>
            </clr-input-container>

            <clr-input-container>
                <label>Datastore</label>
                <input clrInput [(ngModel)]="item.vars['datastore']" name="datastore" size="34" required>
            </clr-input-container>

            <clr-input-container>
                <label>Folder</label>
                <input clrInput [(ngModel)]="item.vars['folder']" name="folder" size="34" required>
            </clr-input-container>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="nfsForm.invalid">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>
